<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>放大镜</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        img {
            width: 100%;
            height: 100%;
            display: block;
        }

        .box {
            width: 450px;
            margin: 50px;
            display: flex;
            flex-direction: column;
            position: relative;
        }

        .box>.show {
            width: 400px;
            height: 400px;
            border: 1px solid #333;
            position: relative;
        }

        .box>.show>.mask {
            width: 200px;
            height: 200px;
            background-color: yellow;
            opacity: 0.4;
            position: absolute;
            top: 0px;
            left: 0px;
            display: none;
        }

        .box>.list {
            width: 100%;
            flex: 1;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            box-sizing: border-box;
            padding: 20px;
        }

        .box>.list>p {
            width: 54px;
            height: 54px;
            border: 1px solid #333;
            margin-right: 10px;
        }

        .box>.list>p.active {
            border-color: red;
        }

        .box>.enlarge {
            width: 400px;
            height: 400px;

            position: absolute;
            top: 0;
            left: 101%;

            background: url(./imgs/1.big.jpg) no-repeat;
            background-size: 800px 800px;
            background-position: 0 0;

            /* display: none; */
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="show">
            <img src="./imgs/1.jpg" alt="" />
            <div class="mask"></div>
        </div>

        <div class="list">
            <p class="active">
                <img src="./imgs/1.small.jpg" showImg="./imgs/1.jpg" enlargeImg="./imgs/1.big.jpg" alt="" />
            </p>
            <p>
                <img src="./imgs/2.small.jpg" showImg="./imgs/2.jpg" enlargeImg="./imgs/2.big.jpg" alt="" />
            </p>
        </div>

        <div class="enlarge"></div>
    </div>
    <script>
        const box = document.querySelector(".box");
        const show = document.querySelector(".show");
        const mask = document.querySelector(".mask");
        const list = document.querySelector(".list");
        const enlarge = document.querySelector(".enlarge");

        /* 鼠标在show中的移入移出事件 */
        show.onmouseover = function (e) {
            mask.style.display = enlarge.style.display = "block";
        };

        show.onmouseout = function (e) {
            mask.style.display = enlarge.style.display = "none";
        };

        /* 鼠标在show中的move事件 */
        show.onmousemove = function (e) {
            const ex = e.pageX;
            const ey = e.pageY;
            console.log(ex, ey);

            let left = ex - box.offsetLeft - mask.clientWidth / 2;
            let top = ey - box.offsetTop - mask.clientHeight / 2;

            // 边界检测
            left = left < 0 ? 0 : left;
            left =
                left > show.clientWidth - mask.clientWidth
                    ? show.clientWidth - mask.clientWidth
                    : left;
            top = top < 0 ? 0 : top;
            top =
                top > show.clientHeight - mask.clientHeight
                    ? show.clientHeight - mask.clientHeight
                    : top;

            /* 设置mask的位置 */
            mask.style.left = left + "px";
            mask.style.top = top + "px";

            /* 计算enlarge的background-position */
            enlarge.style.backgroundPosition =
                `${(-enlarge.clientWidth / mask.clientWidth) * left}px 
                ${(-enlarge.clientHeight / mask.clientHeight) * top}px`;
        };

        /* list中p的点击事件 */
        // 遍历list中的所有p 一一给每个P设置点击事件
        for (let i = 0; i < list.children.length; i++) {

            list.children[i].onclick = function (e) {

                //不用i

                // 取消所有p的active
                for (let j = 0; j < list.children.length; j++) {
                    list.children[j].className = "";
                }

                // 设置当前p为active
                this.className = "active";

                // 从当前p中的img中拿到showImg enlargeImg
                const showImg = this.children[0].getAttribute("showImg");
                const enlargeImg = this.children[0].getAttribute("enlargeImg");

                // 分别丢给show中的图片的src 和enlarge的背景
                show.children[0].src = showImg;
                enlarge.style.backgroundImage = `url(${enlargeImg})`;
            };

        }

        function getStyle(element, attr) {
            return window.getComputedStyle(element)[attr];
        }
    </script>
</body>

</html>